/* =====================================================
   ROOT SETTINGS (1x saja)
===================================================== */
:root{
  --shiftX: 0mm;

  --bg: #f6f7fb;
  --card: #ffffff;
  --text: #1f2937;
  --muted: #6b7280;
  --border: #e5e7eb;

  --primary: #F9A825;
  --primary-2: #e39200;

  --shadow-sm: 0 2px 10px rgba(0,0,0,.06);
  --shadow-md: 0 10px 28px rgba(0,0,0,.10);

  --r-sm: 10px;
  --r-md: 14px;
}


/* =====================================================
   GLOBAL
===================================================== */
.btn-cashier{
  width:100%;
  padding:14px;
  margin-bottom:10px;
  font-size:15px;
  font-weight:600;
  border:none;
  border-radius:10px;
  cursor:pointer;
  background:#F9A825;
  color:#fff;
}
.btn-cashier:hover{
  background:#e0a800;
}

* { box-sizing: border-box; }
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
}

.pos-wrapper {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

/* =====================================================
   HEADER
===================================================== */
.pos-header{
  height: 56px;
  background: var(--card);
  border-bottom: 1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 0 16px;
  box-shadow: 0 2px 12px rgba(0,0,0,.04);
}

.pos-header-left {
  font-weight: bold;
  color: #F9A825;
}
.pos-header-right {
  font-size: 12px;
  color: #666;
}

/* =====================================================
   MAIN LAYOUT
===================================================== */
.pos-main {
  flex: 1;
  display: flex;
  overflow: hidden;
}

/* =====================================================
   LEFT PANEL (DINAMIS) + SIDEBAR
===================================================== */
.left-panel{
  flex: 3;
  display: flex;
  overflow: hidden;
}

/* sidebar tab */
.left-tabs{
  width: 64px;
  background: #fff;
  border-right: 1px solid #e0e0e0;
  display: flex;
  flex-direction: column;
  padding: 10px 8px;
}

/* menu isi fleksibel */
.left-tabs-menu{
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

/* footer nempel bawah */
.left-tabs-footer{
  margin-top: auto;
}

.tab-btn{
  width:100%;
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 12px;
  padding: 10px 0;
  cursor:pointer;
  transition:.15s;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  font-size:10px;
  color:#374151;
}
.tab-btn:hover{
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}
.tab-btn.active{
  border-color: var(--primary);
  background: #FFF8E1;
  font-weight: 800;
}

.tab-btn .ico{ font-size: 18px; }
.btn:hover{
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}
.tab-btn.active{
  border-color:#F9A825;
  background:#FFF8E1;
  font-weight:700;
}

.left-content{
  flex: 1;
  display:flex;
  overflow:hidden;
}

/* =====================================================
   PRODUCT PANEL (KIRI)
===================================================== */
.product-panel {
  flex: 1;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* =====================================================
   PRODUCT TOOLBAR
===================================================== */
.product-toolbar {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}

.search-input {
  flex: 1;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #fff;
  padding: 0 8px;
}
.search-input input {
  width: 100%;
  height: 34px;              /* ⬅️ kunci tinggi */
  border: none;
  outline: none;
  padding: 0 6px;            /* ⬅️ vertikal di-nol-kan */
  font-size: 13px;
  line-height: 34px;         /* ⬅️ teks tepat di tengah */
}

.btn {
  height: 34px;              /* ⬅️ sama dengan input */
  padding: 0 12px;           /* ⬅️ hanya horizontal */
  border-radius: 10px;
  font-size: 13px;
  cursor: pointer;
}

.btn-cari{
  background: var(--primary);
  border-color: var(--primary);
  color:#fff;
}
.btn-cari:hover{
  background: var(--primary-2);
  border-color: var(--primary-2);
}
/* =====================================================
   PRODUCT GRID
===================================================== */
.product-grid {
  flex: 1;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
  gap: 8px;
}

/* =====================================================
   PRODUCT CARD
===================================================== */
.product-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius: 14px;
  display:flex;
  flex-direction:column;
  cursor:pointer;
  transition:.15s;
  min-height: 260px;
  box-shadow: 0 1px 10px rgba(0,0,0,.04);
}
.product-card:hover{
  box-shadow: 0 10px 26px rgba(0,0,0,.10);
  transform: translateY(-2px);
}


/* stok 0 tapi tetap tampil beda (boleh diklik jika requireStock OFF) */
.product-card.oos {
  opacity: .5;
}

/* stok 0 dikunci (requireStock ON) */
.product-card.locked {
  opacity: .5;
  cursor: not-allowed;
}


.product-card:hover {
  box-shadow: 0 3px 8px rgba(0,0,0,.12);
  transform: translateY(-2px);
}

/* =====================================================
   PRODUCT IMAGE
===================================================== */
.product-image {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #f3f3f3;
  object-fit: contain;
}

/* =====================================================
   PRODUCT BODY (NAMA PRODUK)
===================================================== */
.product-body {
  padding: 6px 10px;
  flex: 1;
  display: flex;
  align-items: flex-start;
}

.product-name {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  max-height: 34px;
  overflow: hidden;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* =====================================================
   PRODUCT FOOTER (HARGA & STOK)
===================================================== */
.product-footer {
  margin-top: auto;
  padding: 4px 10px 8px;
  border-top: 1px solid #eee;

  display: flex;
  justify-content: space-between;
  align-items: center;

  font-size: 12px;
  min-height: 30px;
}

.product-price {
  font-weight: bold;
  color: #1a7c1a;
  margin-bottom: 1px;
}

.product-stock {
  font-size: 12px;
  font-weight: 600;
  color: #1565c0;
  white-space: nowrap;
}

/* =====================================================
   CART PANEL (KANAN) – JUBELIO STYLE
===================================================== */
.cart-panel {
  flex: 2;
  min-width: 380px;
  border-left: 1px solid #ddd;
  background: #fff;
  padding: 14px;
  display: flex;
  flex-direction: column;
}

/* =====================================================
   CART HEADER
===================================================== */
.cart-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
}
.cart-title {
  font-weight: 700;
  font-size: 15px;
}
.cart-order-no {
  font-size: 11px;
  color: #888;
}
.cart-reset {
  border: none;
  background: none;
  color: #FFAB00;
  cursor: pointer;
  font-size: 12px;
}

/* =====================================================
   CART CUSTOMER
===================================================== */
.cart-customer {
  margin-bottom: 10px;
}
.cart-customer label {
  display: block;
  font-size: 12px;
  color: #555;
  margin-bottom: 4px;
}
.cart-customer input {
  width: 100%;
  padding: 8px 10px;
  font-size: 13px;
  border: 1px solid #ddd;
  border-radius: 6px;
  background: #fafafa;
  outline: none;
}

/* =====================================================
   CART ITEMS
===================================================== */
.cart-items {
  flex: 1;
  overflow-y: auto;
}
.cart-item {
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 8px;
}
.cart-item-name {
  font-weight: 600;
  font-size: 13px;
}
.cart-item-code {
  font-size: 11px;
  color: #777;
}
.cart-item-price {
  color: #FFAB00;
  font-weight: bold;
  font-size: 13px;
  float: right;
}
.cart-item-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}
.qty-btn {
  width: 28px;
  height: 28px;
  border-radius: 4px;
  border: 1px solid #ccc;
  background: #fff;
  cursor: pointer;
}
.qty-value {
  width: 32px;
  text-align: center;
  font-weight: bold;
}
.btn-delete {
  margin-left: auto;
  border: 1px solid #FFAB00;
  background: #fff;
  color: var(--primary);
  border-radius: 4px;
  cursor: pointer;
}

/* =====================================================
   CART SUMMARY
===================================================== */
.cart-summary {
  border-top: 1px dashed #ddd;
  padding-top: 10px;
  margin-top: 10px;
}
.summary-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  margin-bottom: 6px;
}
.summary-row.total {
  font-size: 16px;
  font-weight: bold;
}

/* =====================================================
   BUTTON NEXT
===================================================== */
.btn-next {
  margin-top: 12px;
  padding: 14px;
  background: #F9A825;
  color: #fff;
  border: none;
  font-size: 15px;
  border-radius: 6px;
  cursor: pointer;
}

/* =====================================================
   PAYMENT PAGE
===================================================== */
.payment-page {
  flex: 1;
  width: 100%;
  padding: 24px;
  background: #f5f5f7;
}

.payment-wrapper {
  display: flex;
  gap: 24px;
  min-height: 0;   /* ✅ penting untuk flex child */
}


.payment-left {
  flex: 1;
  background: #fff;
  border-radius: 10px;
  padding: 20px;
  display: flex;
  flex-direction: column;

  min-height: 0;     /* ✅ biar isi flex tidak kepotong */
  overflow: auto;    /* ✅ kalau kepanjangan, dia scroll */
}

#payLinesBox{
  position: relative;
  z-index: 5;
}

.pay-summary .row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 15px;
}

.pay-method,
.pay-input {
  margin-top: 16px;
}

.pay-change {
  margin-top: 16px;
  font-size: 16px;
}

.btn-pay {
  height: 44px;
  padding: 0 24px;
  border-radius: 6px;
  border: none;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: .2s;
  width: 100%;
  margin-left: 0;
}

/* =====================================================
   FOOTER ROW PAYMENT
===================================================== */
.payment-page {
  flex: 1;
  width: 100%;
  padding: 24px;
  background: #f5f5f7;
}

.payment-wrapper {
  display: flex;
  gap: 24px;
  min-height: 0;   /* ✅ penting untuk flex child */
}


.payment-page{
  min-height: 0;
  display: flex;
}

.payment-wrapper{
  min-height: 0;
  flex: 1;
}

.payment-left{
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden; /* ✅ penting: jangan scroll di parent */
}

/* ✅ Tambahan baru */
.payment-scroll{
  flex: 1;
  min-height: 0;
  overflow: auto;      /* ✅ yang scroll cuma ini */
  padding-bottom: 16px;
}

/* ✅ Footer selalu kelihatan */
.pay-footer-row{
  flex: 0 0 auto;
  background: #fff;
  padding-top: 12px;
  border-top: 1px solid #eee;
}
#payLinesBox{
  max-height: 180px;
  overflow: auto;
}


#payLinesBox{
  position: relative;
  z-index: 5;
}

/* =====================================================
   STATE DISABLED / ACTIVE
===================================================== */
.btn-pay.disabled {
  background: #ccc;
  color: #666;
  cursor: not-allowed;
}
.btn-pay.active {
  background: #F9A825;
  color: #fff;
}

.btn-back {
  padding: 12px;
  background: #eee;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

/* =====================================================
   RINGKASAN PEMBAYARAN (JUBELIO STYLE)
===================================================== */
.payment-left h2 {
  margin-top: 0;
  font-size: 22px;
  font-weight: 700;
}

/* =====================================================
   METODE BAYAR GRID
===================================================== */
.pay-method-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin-top: 10px;
}

.pay-method-btn {
  border: 1px solid #ddd;
  background: #fff;
  padding: 12px 8px;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  text-align: center;
}

.pay-method-btn.active {
  border-color: #F9A825;
  background: #FFF8E1;
  font-weight: bold;
}

/* =====================================================
   QUICK CASH
===================================================== */
.quick-cash {
  display: flex;
  gap: 10px;
}

.quick-cash .btn {
  flex: 1;
  padding: 12px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid #ddd;
  font-size: 14px;
}

/* =====================================================
   ROW / LEFT / RIGHT (STRUK)
===================================================== */
.r-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:2mm;
}
.r-left{
  flex:1;
  min-width:0;
}
.r-right{
  margin-left:auto;
  text-align:right;
  white-space:nowrap;
  font-weight:600;
}

/* =====================================================
   STRUK THERMAL — FINAL FIXED (FK80 & POS58)
===================================================== */
#receiptModal{
  display:none;
  align-items:flex-start;
  justify-content:center;
  padding-top:20px;
}
#receiptContent{
  background:#fff;
  padding:0;
}
.receipt{
  font-family: monospace;
  font-size:10px;
  line-height:1.25;
  color:#000;
  font-weight:700; /* ⬅️ TAMBAH INI */
  padding:0 0.2mm 0 1.2mm;
  transform:translateX(var(--shiftX));
}

.receipt-80{ width:76mm; }
.receipt-58{ width:48mm; }

.r-cols{
  display:flex;
  align-items:flex-start;
  gap:1mm;
}
.r-qty{ width:6mm; white-space:nowrap; font-weight:600; }
.r-unit{ width:18mm; white-space:nowrap; }
.r-sub{
  margin-left:auto;
  width:18mm;
  text-align:right;
  white-space:nowrap;
  font-weight:600;
}
.receipt-58 .r-qty{ width:5mm; }
.receipt-58 .r-unit{ width:13mm; }
.receipt-58 .r-sub{ width:12mm; }

.r-sep{
  border-top:1px dashed #000;
  margin:3px 0;
  opacity:.4;
}
.r-center{ text-align:center; }
/* =========================
   PAYMENT UI (FINAL - CLEAN)
========================= */

.payment-page{
  flex: 1;
  min-height: 0;
  display: flex;
  width: 100%;
  padding: 24px;
  background: #f5f5f7;
}

.payment-wrapper{
  flex: 1;
  min-height: 0;
  display: flex;
  gap: 24px;
}

.payment-left{
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 14px;
  border: 1px solid #eee;
  box-shadow: 0 8px 22px rgba(0,0,0,.06);
  overflow: hidden; /* penting: card rapih */
}

/* yang boleh scroll hanya konten */
.payment-scroll{
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 20px;
}

/* box list pembayaran */
#payLinesBox{
  margin-top: 14px;
  border: 1px solid #eee;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}

#payLinesList{
  max-height: 180px;  /* biar kalau 3 metode gak dorong tombol */
  overflow: auto;
}

.pay-remaining-row{
  display:flex;
  justify-content:space-between;
  padding:10px 12px;
  border-top:1px solid #eee;
  background:#fafafa;
  font-size:13px;
}

.pay-method-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);  /* ✅ dari 5 jadi 6 */
  gap: 10px;
  margin-top: 10px;
}


.pay-method-btn{
  border: 1px solid #e5e7eb;
  background: #fff;
  padding: 12px 10px;
  border-radius: 12px;
  font-size: 14px;
  cursor: pointer;
  text-align: center;
  transition: .15s;
}
.pay-method-btn:hover{
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
  transform: translateY(-1px);
}
.pay-method-btn.active{
  border-color: #F9A825;
  background: #FFF8E1;
  font-weight: 800;
}

/* input */
.pay-input{ margin-top: 16px; }
#cashInput{
  width:100%;
  padding: 12px 12px;
  font-size: 15px;
  margin-top: 6px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  outline: none;
}

/* footer sticky dalam card */
.pay-footer-row{
  flex: 0 0 auto;
  padding: 14px 20px;
  background: #fff;
  border-top: 1px solid #eee;
  box-shadow: 0 -10px 18px rgba(0,0,0,.06);
}

/* tombol jadi premium */
.btn-pay{
  width: 100%;
  height: 54px;
  border-radius: 14px;
  font-size: 16px;
  border: none;
  font-weight: 800;
  cursor: pointer;
  transition: .15s;
}

.btn-pay.disabled{
  background: #e5e7eb;
  color: #9ca3af;
  cursor: not-allowed;
}

.btn-pay.active{
  background: #F9A825;
  color: #fff;
}
.btn-pay.active:hover{
  background: #e39200;
}

/* RESPONSIVE: jangan ganggu mobile */
@media (max-width: 900px){
  .payment-page{ padding: 12px; }
  .pay-method-grid{ grid-template-columns: repeat(2, 1fr); }
  #payLinesList{ max-height: 140px; }
}


@media print{
  @page{ margin:0; }
  html, body{
    margin:0 !important;
    padding:0 !important;
    background:#fff !important;
  }
  body > *:not(#receiptModal){
    display:none !important;
  }
  #receiptModal{
    display:block !important;
    position:static !important;
    inset:auto !important;
    margin:0 !important;
    padding:0 !important;
    background:#fff !important;
  }
  #receiptContent{
    display:block !important;
    margin:0 !important;
    padding:0 !important;
    background:#fff !important;
  }
  .receipt{
    display:block;
    font-size:10px;
    line-height:1.25;
    margin:0;
    page-break-before: avoid;
    page-break-after: avoid;
  }
}

/* =====================================================
   TRANSAKSI PANEL
===================================================== */
.txn-panel{
  flex: 1;
  padding: 16px;
  display: none;
  flex-direction: column;
  overflow: hidden;
}
.txn-toolbar{
  display:flex;
  gap:10px;
  align-items:center;
  margin-bottom: 10px;
}
.txn-toolbar .search-input{
  flex: 1;
}
.txn-body{
  flex:1;
  display:flex;
  gap: 12px;
  overflow:hidden;
}
.txn-list{
  flex:1;            /* ⬅️ biar melebar */
  min-width:520px;   /* ⬅️ jaga supaya enak dibaca */
  background:#fff;
  border:1px solid #eee;
  border-radius: 10px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}

.txn-list-head{
  padding:10px 12px;
  border-bottom:1px solid #eee;
  background:#fafafa;
  font-weight:700;
  font-size:13px;
}
.txn-list-items{
  flex:1;
  overflow-y:auto;
}
.txn-item{
  padding:10px 12px;
  border-bottom:1px solid #f1f1f1;
  cursor:pointer;
}
.txn-item:hover{ background:#fff8e1; }
.txn-item.active{ background:#FFF8E1; border-left:4px solid #F9A825; }
.txn-item .top{
  display:flex;
  justify-content:space-between;
  gap:8px;
  font-size:12px;
  font-weight:700;
}
.txn-item .mid{
  margin-top:4px;
  display:flex;
  justify-content:space-between;
  font-size:11px;
  color:#666;
}
/* ==============================
   BADGE STATUS (FIX BORDER)
============================== */

.badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:4px 10px;
  font-size:11px;
  line-height:1;
  border-radius:999px;
  border:1.5px solid transparent;
  white-space:nowrap;
}

.badge.paid{
  border-color:#1a7c1a;
  color:#1a7c1a;
  background:#eaf7ea;
}

.badge.unpaid{
  border-color:#e53935;
  color:#e53935;
  background:#ffebee;
}


.txn-detail{
  flex:0 0 360px;   /* ⬅️ ini yang bikin ramping */
  max-width:360px;
  background:#fff;
  border:1px solid #eee;
  border-radius: 10px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}

.txn-detail-head{
  padding:12px 14px;
  border-bottom:1px solid #eee;
  background:#fafafa;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
}
.txn-detail-title{
  font-weight:800;
}
.txn-detail-sub{
  font-size:12px;
  color:#666;
  margin-top:4px;
}
.txn-detail-body{
  padding: 14px;
  overflow-y:auto;
}
.txn-kv{
  display:grid;
  grid-template-columns: 150px 1fr;
  gap: 8px 12px;
  font-size:13px;
  margin-bottom: 12px;
}
.txn-kv div.key{ color:#666; }
.txn-section-title{
  margin: 12px 0 8px;
  font-weight:800;
  font-size:13px;
}
.txn-items{
  border:1px solid #eee;
  border-radius:10px;
  overflow:hidden;
}
.txn-items .row{
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border-bottom:1px solid #f1f1f1;
  font-size:13px;
}
.txn-items .row:last-child{ border-bottom:none; }
.txn-items .row .name{
  flex:1;
  min-width:0;
}
.txn-items .row .meta{
  white-space:nowrap;
  font-weight:700;
}
.txn-totalbox{
  margin-top: 10px;
  border-top:1px dashed #ddd;
  padding-top: 10px;
  display:flex;
  justify-content:space-between;
  font-weight:800;
  font-size:16px;
}
.txn-actions{
  position: sticky;
  bottom: 0;
  z-index: 10;
  padding: 12px 14px;
  border-top:1px solid #eee;
  background: rgba(250,250,250,.92);
  backdrop-filter: blur(6px);
  display:flex;
  align-items:center;
  gap:10px;
  justify-content:flex-end;
  box-shadow: 0 -10px 18px rgba(0,0,0,.06);
}

/* aksi transaksi: tombol rapi + konsisten */
.txn-actions .btn-outline,
.txn-actions .btn-primary{
  height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:0 14px;
  border-radius:12px;
  font-weight:800;
  white-space:nowrap;
}

.txn-actions .btn-outline{
  font-weight:700;
}

.txn-actions .btn-primary{
  width:auto;          /* override global width:100% */
  min-width:170px;
  padding:0 18px;
}

@media (max-width: 900px){
  .txn-actions{
    position: static;   /* mobile aman */
    flex-direction:column;
    align-items:stretch;
  }
  .txn-actions .btn-outline,
  .txn-actions .btn-primary{
    width:100%;
    min-width:0;
  }
}
.btn-outline{
  padding: 9px 12px;
  border-radius: 10px;
  border:1px solid var(--border);
  background:#fff;
  cursor:pointer;
  font-size:13px;
}
.btn-outline:hover{
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}
.btn-primary{
  width: 100%;
  padding: 11px 14px;
  font-size: 13px;
  border-radius: 12px;
  border: 1px solid var(--primary);
  background: var(--primary);
  color:#fff;
  font-weight: 800;
  cursor: pointer;
  transition:.15s;
}
.btn-primary:hover{
  background: var(--primary-2);
  border-color: var(--primary-2);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}
/* ==============================
   TRANSAKSI – ONE LINE ROW
============================== */

.txn-item.one-line{
  display:grid;
  grid-template-columns:
    2.4fr   /* No Order */
    1.6fr   /* Tanggal & Jam */
    1.6fr   /* Customer */
    1.2fr   /* Total */
    0.8fr;  /* Status */
  align-items:center;
  gap:12px;
  padding:10px 12px;
  border-bottom:1px solid #eee;
  cursor:pointer;
}

.txn-item.one-line:hover{
  background:#FFF8E1;
}

.txn-col{
  font-size:13px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.txn-col.order{
  font-weight:800;
}

.txn-col.total{
  font-weight:800;
  text-align:right;
}

.txn-col.status{
  text-align:right;
}

/* =====================================================
   SETTINGS – FINAL (2 COLUMN, FULL WIDTH)
===================================================== */

.settings-panel{
  flex: 1;
  display: none;              /* dikontrol via JS */
  padding: 16px 18px;
  overflow: auto;
  background: #f5f5f7;
}

/* GRID 2 KOLOM FULL */
.settings-two-col{
  width: 100%;
  min-height: calc(100vh - 120px); /* biar kerasa "full layar" */
  display: grid;
  grid-template-columns: 1fr 1fr;  /* kiri 50% - kanan 50% */
  gap: 16px;
  align-items: start;
}

/* KANAN: STACK ATAS-BAWAH */
.right-stack{
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* CARD */
.set-card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 14px 16px;
  box-shadow: var(--shadow-sm);
}
.set-card h3{
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
}


/* Judul */
.set-card h3{
  margin: 0 0 14px;
  font-size: 14px;
  font-weight: 800;
  color: #333;
}

/* ROW */
.set-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 8px 0;
}

.set-row label{
  flex: 1;
  font-size: 13px;
  font-weight: 600;
  color: #333;
}

/* Input kanan */
.set-row input[type="text"],
.set-row input[type="number"],
.set-row select{
  width: 220px;              /* biar rapi */
  max-width: 55%;
  padding: 8px 10px;
  font-size: 13px;
  border-radius: 8px;
  border: 1px solid #ddd;
  background: #fff;
}

/* BLOCK (TEXTAREA CATATAN) */
.set-block{
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 10px 0;
}

.set-block label{
  font-size: 13px;
  font-weight: 700;
  color: #333;
}

.set-block textarea{
  width: 100%;
  resize: vertical;
  min-height: 44px;
  padding: 10px 12px;
  font-size: 13px;
  border-radius: 8px;
  border: 1px solid #ddd;
  font-family: inherit;
}

/* CHECKLIST */
.set-check{
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  margin: 10px 0;
}

.set-check input{
  transform: scale(1.1);
}

/* NOTE */
.small-note{
  font-size: 12px;
  color: #777;
  margin-top: 8px;
  line-height: 1.4;
}

/* BUTTON */
.btn-primary{
  margin-top: 10px;
  width: 100%;
  padding: 11px 16px;
  font-size: 13px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  background: #f4a100;
  color: #fff;
  font-weight: 800;
}

.btn-primary:hover{
  background: #e39200;
}
.btn-primary-sm{
  padding:10px 12px;
  border-radius: 10px;
  border:1px solid var(--primary);
  background: var(--primary);
  color:#fff;
  cursor:pointer;
  font-size:13px;
  font-weight:700;
}
.sync-status{
  font-size: 12px;
  color: #666;
  margin-top: 8px;
}

/* RESPONSIVE (kalau jendela diperkecil) */
@media (max-width: 1050px){
  .settings-two-col{
    grid-template-columns: 1fr;
  }
  .set-row input[type="text"],
  .set-row input[type="number"],
  .set-row select{
    width: 100%;
    max-width: 100%;
  }
}

/* =====================================================
   REPORT PANEL
===================================================== */
.report-panel{
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
  overflow-y: auto;
}
.set-card{
  background:#fff;
  border:1px solid #eaeaea;
  border-radius:12px;
  padding: 12px 14px;   /* ⬅️ lebih padat */
  margin-bottom: 12px; /* ⬅️ lebih rapat */
}


.set-card h3{
  margin: 0 0 8px;     /* ⬅️ dipendekkan */
  font-size: 14px;    /* ⬅️ sedikit lebih kecil */
  font-weight: 700;
}
/* =====================================================
   REPORT UI POLISH (RINGKASAN)
===================================================== */

/* wrapper ringkasan */
#reportSummary{
  gap:8px !important;
}

/* grid kartu */
.rpt-cards{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap:8px;
}

/* kartu ringkasan */
.rpt-card{
  background:#fff;
  border:1px solid #eee;
  border-radius:8px;
  padding:6px 6px;
  text-align:center;
  box-shadow:0 1px 4px rgba(0,0,0,.05);
}

/* judul kartu */
.rpt-card-title{
  font-size:10px;
  color:#777;
  font-weight:600;
}

/* nilai kartu */
.rpt-card-value{
  font-size:13px;
  font-weight:800;
  margin-top:3px;
  line-height:1.2;
}

/* nilai besar (total) */
.rpt-card-value.big{
  font-size:15px;
  font-weight:900;
}
.rpt-table{
  width:100%;
  border:1px solid #eee;
  border-radius:12px;
  overflow:hidden;
  background:#fff;
}
.rpt-row{
  display:grid;
  grid-template-columns:
    1.6fr   /* Kasir */
    0.7fr   /* Transaksi */
    1fr     /* Cash */
    1fr     /* QRIS */
    1fr     /* Debit BCA */
    1fr     /* Debit Mandiri */
    1fr     /* Transfer BCA */
    1fr     /* Transfer Mandiri */
    1fr     /* Piutang */
    1.2fr;  /* Total Omzet */
  gap:10px;
  padding:10px 12px;
  border-bottom:1px solid #f1f1f1;
  font-size:12px;
  align-items:center;
}


.rpt-row.head{
  background:#fafafa;
  font-weight:700;
}
.rpt-right{
  text-align:right;
  font-weight:700;
  font-variant-numeric: tabular-nums;
}

.rpt-center{
  text-align:center;
  font-weight:700;
}

.rpt-muted{
  color:#777;
  font-weight:600;
}
.rpt-row:not(.head):nth-child(even){
  background:#fcfcfc;
}
.rpt-row:not(.head):hover{
  background:#fff8e1;
}


/* ===============================
   CUSTOMER DROPDOWN (PREMIUM)
=============================== */
.customer-dropdown{
  display:none;
  position:absolute;
  top:58px;
  left:0;
  right:0;
  background:#fff;
  border:1px solid #e6e6e6;
  border-radius:12px;
  max-height:260px;
  overflow-y:auto;
  z-index:1000;
  box-shadow:0 12px 28px rgba(0,0,0,.12);
}

/* item */
.customer-item{
  padding:12px 14px;
  cursor:pointer;
  border-bottom:1px solid #f1f1f1;
  transition:background .15s ease;
}

.customer-item:last-child{
  border-bottom:none;
}

.customer-item:hover{
  background:#FFF8E1;
}

.customer-name{
  font-weight:600;
  font-size:12px;
  color:#222;
  line-height:1.3;

  display:-webkit-box;
  -webkit-line-clamp:2;      /* ⬅️ maksimal 2 baris */
  -webkit-box-orient:vertical;
  overflow:hidden;
}



/* info bawah */
.customer-meta{
  font-size:11px;
  color:#666;
  margin-top:2px;
}
.logout-btn {
  background: #fff;
  color: #d32f2f;
  border: 1px solid #f0f0f0;
  margin-top: 8px;
}

.logout-btn .ico {
  color: #d32f2f;
}

.logout-btn:hover {
  background: #fdeaea;
  border-color: #f5c6c6;
}
/* ===============================
   SORT: Terlaris / Terbaru / A–Z
================================ */
.product-sort{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin:8px 0 12px;
}

.sort-main{
  display:flex;
  gap:8px;
}

.sort-btn{
  flex:1;
  padding:10px 0;
  border-radius:12px;
  border:1px solid #e5e7eb;
  background:#f9fafb;
  font-weight:800;
  font-size:13px;
  cursor:pointer;
}

.sort-btn.active{
  background:#fde68a;      /* kuning lembut */
  color:#92400e;           /* coklat gelap */
  border-color:#f59e0b;
}


/* ===============================
   PERIODE TERLARIS (default: sembunyi)
   Muncul kalau .product-sort punya class: show-period
================================ */
.sort-period{
  display:none;
  gap:6px;
  flex-wrap:wrap;
}

.product-sort.show-period .sort-period{
  display:flex;
}

.period-btn{
  padding:6px 12px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  border:1px solid #e5e7eb;
  background:#ffffff;
  cursor:pointer;
}

.period-btn.active{
  background:#2563eb;
  color:#fff;
  border-color:#2563eb;
}
.best-period{
  display:flex;
  gap:8px;
  margin:8px 0 12px;
}

.best-period.hidden{
  display:none;
}

.period-btn{
  padding:6px 12px;
  border-radius:10px;
  border:1px solid #e5e7eb;
  background:#fff;
  font-size:13px;
  cursor:pointer;
}

.period-btn.active{
  background:#fde68a;
  border-color:#f59e0b;
  color:#92400e;
}
/* ==========================
   TXN TOOLBAR (TRANS)
========================== */
.txn-toolbar{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  padding:10px 12px;
  background:#fff;
  border:1px solid #eee;
  border-radius:14px;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
}

.txn-toolbar .search-input{
  flex:1 1 320px;
  min-width:280px;
}

.txn-toolbar .search-input input{
  width:100%;
  height:36px;
  border:1px solid #e6e6ea;
  border-radius:12px;
  padding:0 12px;
  font-size:13px;
  background:#fafafa;
  outline:none;
}

.txn-toolbar .txn-filter{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.txn-toolbar .txn-label{
  font-size:12px;
  font-weight:800;
  color:#333;
  margin-right:2px;
}

.txn-toolbar .txn-date-range{
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 8px;
  border:1px solid #eee;
  border-radius:12px;
  background:#fafafa;
}

.txn-toolbar .txn-sep{
  font-weight:800;
  color:#666;
}

.txn-toolbar input[type="date"],
.txn-toolbar select{
  height:36px;
  border:1px solid #e6e6ea;
  border-radius:12px;
  padding:0 10px;
  font-size:13px;
  background:#fff;
}

.txn-toolbar .btn-outline{
  height:36px;
  border-radius:12px;
  padding:0 12px;
  font-size:13px;
}

.txn-toolbar .txn-actions{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:8px;
}

.txn-toolbar .txn-actions .btn{
  height:36px;
  border-radius:12px;
  padding:0 14px;
}

.txn-toolbar .btn-refresh{
  width:36px;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* RESPONSIVE: biar mobile aman (nggak rusak) */
@media (max-width: 900px){
  .txn-toolbar .search-input{ flex:1 1 100%; min-width:0; }
  .txn-toolbar .txn-actions{ width:100%; justify-content:flex-end; }
  .txn-toolbar .txn-date-range{ width:100%; justify-content:space-between; }
}
.txn-status-row{
  display:flex;
  align-items:center;
  gap:10px;
  margin:10px 0;
}

.txn-status-label{
  font-weight:600;
}

.txn-status-badge{
  padding:4px 10px;
  border-radius:999px;
  font-weight:700;
  font-size:12px;
  background:#eee;
  color:#333;
}

``
}

.txn-status-badge.is-canceled{
  background:#ffe5e5;
  color:#b00000;
}
/* =====================================================
   PREMIUM LOOK - PANEL KANAN + BORDER + LIST ITEM
   (rapihin biar seragam, tidak campur-campur)
===================================================== */

/* PANEL KANAN (DETAIL TRANSAKSI) */
.txn-detail{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;                /* lebih premium */
  box-shadow: 0 8px 22px rgba(0,0,0,.06);
}

/* HEADER PANEL */
.txn-detail-head{
  background: #ffffff;                /* sebelumnya #fafafa */
  border-bottom: 1px solid var(--border);
}

/* judul order (biar tegas tapi tetap clean) */
.txn-detail-head .txn-no{
  color: var(--text);
}

/* badge lunas biar lebih “rapih” */
.txn-detail-head .badge{
  border: 1px solid #16a34a;
  background: #ecfdf5;
  color: #166534;
}

/* BODY PANEL */
.txn-detail-body{
  background: #ffffff;
}

/* KV (Customer/Telepon/Tanggal/No Order) */
.txn-kv{
  background: #fcfcfd;                /* lembut, beda tipis dari putih */
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
}

/* key-value warna seragam */
.txn-kv div.key{
  color: var(--muted);
}
.txn-kv div.val{
  color: var(--text);
}

/* ===========================
   LIST ITEM (BOX ITEMS)
=========================== */
.txn-items{
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #ffffff;
  overflow: hidden;
}

/* setiap row item lebih clean */
.txn-items .row{
  padding: 12px 14px;                 /* lebih lega & rapi */
  border-bottom: 1px solid #edf0f5;    /* garis pemisah halus */
  background: #ffffff;
}

/* hover lembut (biar terasa premium) */
.txn-items .row:hover{
  background: #fafbff;
}

/* item terakhir tidak perlu border bawah */
.txn-items .row:last-child{
  border-bottom: none;
}

/* nama produk lebih tegas */
.txn-item-name{
  color: var(--text);
  font-weight: 700;
}

/* SKU lebih soft */
.txn-item-sku{
  color: var(--muted);
  opacity: .85;
}

/* qty + harga konsisten */
.txn-item-qty,
.txn-item-price{
  color: var(--text);
  font-weight: 700;
}

/* ===========================
   FOOTER ACTIONS (TOMBOL)
   biar nyatu sama panel (premium)
=========================== */
.txn-actions{
  background: #ffffff;
  border-top: 1px solid var(--border);
}
/* =====================================================
   TXN ACTIONS - FINAL RAPIH (MOBILE + DESKTOP)
   Fix: Pesan Ulang kepotong, warna campur, layout berantakan
===================================================== */

/* ====== BASE (semua device) ====== */
#txnDetailActions.txn-actions{
  background: #ffffff !important;
  border-top: 1px solid #e6e8ef !important;
  padding: 10px 12px !important;
  gap: 10px !important;
  align-items: center !important;
}

/* semua tombol: tinggi seragam & font rapi */
#txnDetailActions.txn-actions button{
  height: 42px !important;
  border-radius: 12px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  padding: 0 14px !important;
}

/* outline (Cetak Ulang) */
#txnDetailActions .btn-outline{
  background: #ffffff !important;
  color: #111827 !important;
  border: 1px solid #d1d5db !important;
}

/* danger (Batalkan) -> biar seragam tapi tetap ada merahnya */
#txnDetailActions .btn-danger{
  background: #ffffff !important;
  color: #b91c1c !important;
  border: 1px solid #fca5a5 !important;
}

/* primary (Pesan Ulang) */
#txnDetailActions .btn-primary{
  background: #f59e0b !important;
  color: #ffffff !important;
  border: 1px solid #f59e0b !important;
  box-shadow: 0 6px 14px rgba(245,158,11,.25) !important;
}

/* ====== MOBILE: tombol jadi rapi (2 tombol atas, 1 tombol bawah full) ====== */
@media (max-width: 900px){

  #txnDetailActions.txn-actions{
    flex-wrap: wrap !important;         /* kunci utama: boleh turun baris */
    justify-content: space-between !important;
  }

  /* tombol 1 dan 2 berbagi 1 baris */
  #txnDetailActions .btn-outline,
  #txnDetailActions .btn-danger{
    flex: 1 1 0 !important;
    min-width: 0 !important;            /* biar gak maksa lebar */
    padding: 0 10px !important;
  }

  /* Pesan Ulang: full lebar di baris bawah */
  #txnDetailActions .btn-primary{
    flex: 1 1 100% !important;
    width: 100% !important;
    margin-top: 4px !important;
    padding: 0 16px !important;
  }
}

/* ====== DESKTOP: tetap satu baris rapi, Pesan Ulang agak lebar ====== */
@media (min-width: 901px){
  #txnDetailActions.txn-actions{
    justify-content: space-between !important;
  }

  #txnDetailActions .btn-primary{
    min-width: 210px !important;
    padding: 0 18px !important;
  }

  #txnDetailActions .btn-outline{
    min-width: 160px !important;
  }

  #txnDetailActions .btn-danger{
    min-width: 140px !important;
  }
}
/* =====================================================
   FIX FINAL: SAMAIN PERSIS (HEIGHT, BORDER, ALIGN, ICON BASELINE)
   Target: tombol footer transaksi panel detail
===================================================== */

.txn-detail #txnDetailActions{
  display: flex !important;
  gap: 10px !important;
  align-items: center !important;
  justify-content: flex-end !important;
  padding: 10px 12px !important;
  background: #fff !important;
  border-top: 1px solid #e6e8ef !important;
}

/* ✅ RESET TOTAL biar semua tombol 1 standar */
.txn-detail #txnDetailActions > button{
  appearance: none !important;
  -webkit-appearance: none !important;

  box-sizing: border-box !important;
  margin: 0 !important;

  height: 40px !important;
  min-height: 40px !important;

  padding: 0 14px !important;
  border-radius: 12px !important;

  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 40px !important;      /* ✅ kunci baseline */
  white-space: nowrap !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;

  border-width: 1px !important;      /* ✅ semua sama 1px */
  border-style: solid !important;

  background: #fff !important;
  box-shadow: none !important;
  outline: none !important;

  flex: 0 1 auto !important;
  min-width: 0 !important;
}

/* ✅ ICON / EMOJI biar posisinya rata */
.txn-detail #txnDetailActions > button{
  vertical-align: middle !important;
}

/* Cetak */
.txn-detail #txnDetailActions .btn-outline{
  border-color: #d1d5db !important;
  color: #111827 !important;
}

/* Batalkan */
.txn-detail #txnDetailActions .btn-danger{
  border-color: #fca5a5 !important;
  color: #b91c1c !important;
}

/* Pesan Ulang (tetap putih, tapi aksen orange) */
.txn-detail #txnDetailActions .btn-primary{
  border-color: #f59e0b !important;
  color: #92400e !important;
}

/* hover premium */
.txn-detail #txnDetailActions .btn-outline:hover{
  background: #f9fafb !important;
}
.txn-detail #txnDetailActions .btn-danger:hover{
  background: #fff1f2 !important;
}
.txn-detail #txnDetailActions .btn-primary:hover{
  background: #fffbeb !important;
}

/* =====================================================
   FINAL OVERRIDE: TXN DETAIL ACTIONS (2x2 grid, rapi, no clipping)
===================================================== */
#txnDetailActions{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  align-items: stretch !important;
  justify-items: stretch !important;
  padding: 12px 12px !important;
  margin-top: 12px !important;
}

@media (min-width: 900px){
  #txnDetailActions{
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

#txnDetailActions > button,
#txnDetailActions .btn-outline,
#txnDetailActions .btn-danger,
#txnDetailActions .btn-primary,
#txnDetailActions .btn-secondary{
  appearance: none !important;
  -webkit-appearance: none !important;
  box-sizing: border-box !important;

  width: 100% !important;
  min-width: 0 !important;

  height: 44px !important;
  min-height: 44px !important;

  padding: 0 10px !important;
  border-radius: 14px !important;

  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 44px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;

  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;

  box-shadow: none !important;
  outline: none !important;
}
/* ================================
   PRICE TOOLTIP (BUKU HARGA)
   ================================ */
.price-tooltip {
  position: fixed;
  z-index: 999999;
  min-width: 260px;
  max-width: 360px;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 10px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.12);
  padding: 10px 12px;
  font-size: 14px;
  line-height: 1.25;
}

.price-tooltip__title {
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.price-tooltip__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.price-tooltip__rowhead {
  font-size: 12px;
  opacity: 0.65;
}

.price-tooltip__row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.price-tooltip__row span {
  opacity: 0.9;
}

.price-tooltip__row b {
  font-weight: 700;
  white-space: nowrap;
}

.price-tooltip__divider {
  height: 1px;
  background: rgba(0,0,0,0.08);
  margin: 2px 0;
}

.price-tooltip__loading {
  font-size: 13px;
  opacity: 0.7;
}
/* ===== STEP 1.1 Icon-only indicators (safe, no sensitive text) ===== */
.mini-ico{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid #eee;
  background:#fff;
  font-size: 14px;
  line-height: 1;
  margin-right: 6px;
}

/* rapikan tombol pensil agar selaras dengan ikon lain */
.cart-icon-btn.btn-edit-price{
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid #eee;
  background:#fff;
  margin-right: 6px;
}
/* ===== Price Edit Popup (STEP 2.2) - center on cart area ===== */
#priceEditModal{
  display:none;
  position:fixed;
  inset:0;
  z-index:9999;
}

/* backdrop cuma area kanan (keranjang), kiri tidak ketutup */
#priceEditModal .pem-backdrop{
  position:absolute;
  top:0;
  right:0;
  height:100%;
  width: 42%;
  background: rgba(0,0,0,.20);
}

/* card kotak, di tengah area kanan */
#priceEditModal .pem-card{
  position:absolute;
  right: 6%;
  top: 50%;
  transform: translateY(-50%);
  width: min(420px, 36vw);
  max-height: 70vh;
  overflow:auto;
  background:#fff;
  border:1px solid #eee;
  border-radius:12px;
  padding:14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.15);
}

#priceEditModal .pem-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}

#priceEditModal .pem-title{
  font-size:14px;
  font-weight:800;
}

#priceEditModal .pem-close{
  background:transparent;
  border:none;
  cursor:pointer;
  font-size:18px;
  line-height:1;
}

#priceEditModal .pem-row{
  font-size:13px;
  margin:6px 0;
}

#priceEditModal .pem-muted{
  font-size:12px;
  opacity:.7;
}

/* mobile: backdrop full, card center full-width kecil */
@media (max-width: 900px){
  #priceEditModal .pem-backdrop{
    width:100%;
  }
  #priceEditModal .pem-card{
    left: 50%;
    right: auto;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(420px, 92vw);
    max-height: 80vh;
  }
}
/* ===== PRICE INDICATOR DOT (FINAL, rapi center) ===== */
/* ===== PRICE INDICATOR DOT (BOX 28x28 biar sejajar tombol) ===== */
.risk-dot{
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid #eee;
  background: #fff;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 28px;
  margin-right: 6px;
  user-select: none;

  /* warna default */
  --dot: #bdbdbd;
}

/* bulatan di tengah */
.risk-dot::before{
  content: "";
  width: 15px;
  height: 15px;
  border-radius: 999px;
  background: var(--dot);
  display: block;
}

/* status colors (set variabelnya) */
.risk-dot.is-neutral{ --dot:#bdbdbd; }
.risk-dot.is-ok{ --dot:#16a34a; }
.risk-dot.is-warn{ --dot:#f59e0b; }
.risk-dot.is-risk{ --dot:#ef4444; }



/* icon kecil biar terasa "tooltip" */
.mini-ico{
  cursor: help;
}
/* ===== FIX VISIBILITY (WAJIB) ===== */
.hidden { display: none !important; }

/* ===== PIUTANG MODAL ===== */
.modal{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
}
.modal-box{
  width: 520px;
  max-width: 94vw;
  background: #fff;
  border-radius: 14px;
  padding: 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.modal .row{ margin-top: 10px; }
.modal .row label{ display:block; font-weight:700; margin-bottom:6px; }
.modal .actions{ display:flex; gap:10px; justify-content:flex-end; margin-top:14px; }
.error{ color:#c00; font-size:12px; margin-top:6px; }
/* =====================================================
   FIX: MODAL DRAFT & PICKING LIST
   Problem: saat item sangat banyak, tombol Copy/Print/Tutup
   hilang karena kartu modal melebihi tinggi layar.
   Solusi:
   - Overlay modal boleh scroll
   - Card punya max-height sesuai viewport
   - Header tombol dibuat sticky
   - Konten list dibuat area scroll sendiri
===================================================== */

#draftModal,
#gudangModal{
  overflow:auto;           
  align-items:flex-start !important;  /* override inline align-items:center */
}

#draftCard,
#gudangCard{
  max-height: calc(100vh - 36px);
  display:flex;
  flex-direction:column;
}

/* header bar (yang ada tombol) selalu kelihatan */
#draftCard > div:first-child,
#gudangCard > div:first-child{
  position: sticky;
  top: 0;
  z-index: 5;
}

/* area isi yang scroll */
#draftContent,
#gudangContent{
  flex:1;
  min-height:0;
  overflow:auto;
}


/* =====================================================
   PIUTANG MONITOR – COMPACT LIST (DESKTOP + MOBILE SAFE)
   Target: padatkan info agar lebih banyak baris tampil
===================================================== */

.piutang-item{
  background:#fff;
  border:1px solid #eee;
  border-radius:12px;
  padding:10px 12px;
  margin:8px 0;
}

.piutang-row{
  display:grid;
  grid-template-columns: 1.4fr 1.4fr 0.8fr auto;
  gap:10px;
  align-items:center;
}


.piutang-no{
  font-weight:600;
  font-size:12.5px;
  letter-spacing:.2px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.piutang-dt{
  font-size:11px;
  color:#6b7280;
  margin-top:3px;
  white-space:nowrap;
}


.piutang-cust{
  font-weight:600;
  font-size:12px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.piutang-phone{
  font-size:11px;
  color:#6b7280;
  margin-top:3px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}



.piutang-amt{
  text-align:right;
  white-space:nowrap;
  font-variant-numeric: tabular-nums;
}
.piutang-amt{ 
  justify-self:start;   /* kolom total mulai dari kiri area kolomnya */
}

.piutang-total{
  font-weight:700;
  font-size:13px;
}

.piutang-sisa{
  font-size:11px;
  color:#6b7280;
  margin-top:3px;
}


.piutang-right{
  display:flex;
  flex-direction:row;      /* jadi 1 baris */
  align-items:center;
  justify-content:flex-end;
  gap:10px;
}


.piutang-actions{
  display:flex;
  gap:6px;
  flex-wrap:nowrap;
}
.piutang-actions{
  align-items:center;
}

.piutang-actions .btn-outline,
.piutang-actions .btn-primary-sm{
  height:30px;
  padding:0 10px;
  border-radius:10px;
  font-size:12px;
  font-weight:700;
  white-space:nowrap;
}


.piutang-actions .btn-outline[disabled]{
  opacity:.6;
  cursor:not-allowed;
}

/* Hover lembut biar enak dibaca */
.piutang-item:hover{
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
}
/* ===== PIUTANG: seragamkan badge & tombol (beda warna saja) ===== */

/* target: badge BELUM BAYAR dan 2 tombol */
.piutang-right .badge,
.piutang-actions .btn-primary-sm,
.piutang-actions .btn-outline{
  height:30px;
  padding:0 12px;
  border-radius:10px;
  font-size:12px;
  font-weight:700;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
  line-height:1;
}
.piutang-right .badge.unpaid{
  color:#ef4444;
  border:1px solid rgba(239,68,68,.75);
  background:rgba(239,68,68,.06);
}
.piutang-actions .btn-primary-sm{
  border:1px solid rgba(245,158,11,.65);
  background:rgba(245,158,11,.95);
  color:#fff;
}
.piutang-actions .btn-outline{
  border:1px solid #e5e7eb;
  background:#fff;
  color:#9ca3af;
}
.piutang-actions .btn-outline[disabled]{
  opacity:.8;
  cursor:not-allowed;
}
.piutang-right .badge,
.piutang-actions .btn-primary-sm,
.piutang-actions .btn-outline{
  height:30px !important;
  padding:0 12px !important;
  border-radius:10px !important;
}

/* RESPONSIVE: Mobile tetap aman (stack) */
@media (max-width: 900px){
  .piutang-row{
    grid-template-columns: 1fr;
    gap:8px;
    align-items:start;
  }
  .piutang-right{
    flex-direction:column;
    align-items:flex-start;
  }

  .piutang-amt{
    text-align:left;
  }

  .piutang-right{
    align-items:flex-start;
  }

  .piutang-actions{
    width:100%;
    flex-wrap:wrap;
  }

  .piutang-actions .btn-outline,
  .piutang-actions .btn-primary-sm{
    flex:1 1 0;
  }
}
/* ===== PIUTANG HEADER (rapi & mobile safe) ===== */
.piutang-toolbar{
  display:flex;
  align-items:center;
  gap:12px;
}

.piutang-head{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0; /* penting biar ellipsis bisa jalan */
}

.piutang-title{
  font-weight:800;
  font-size:14px;
}

.piutang-meta{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:12px;
  color:#6b7280;
  flex-wrap:wrap; /* mobile aman */
}

.piutang-totalinfo{
  color:#111;
  font-weight:700;
}

.piutang-sep{
  color:#cbd5e1;
}

/* Kanan (filter) tetap nempel kanan */
.piutang-toolbar .txn-filter{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:10px;
}

/* Mobile: separator boleh disembunyikan biar lebih clean */
@media (max-width: 520px){
  .piutang-sep{ display:none; }
  .piutang-meta{ gap:6px; }
}
/* ===============================
   PIUTANG: default (tidak aktif)
   =============================== */
#tabPiutang{
  background:#fff;
  border:1px solid #e5e7eb;
}

/* teks Piutang merah terang */
#tabPiutang > div:last-child{
  color:#ef4444;
  font-weight:800;
}

/* icon tetap normal */
#tabPiutang .ico{
  color:inherit;
}

/* ===============================
   PIUTANG: SAAT AKTIF (KUNING)
   samakan dengan menu lain
   =============================== */
#tabPiutang.active,
#tabPiutang.selected{
  background:#fef3c7 !important;   /* kuning */
  border-color:#f59e0b !important;
}

/* saat aktif, teks ikut hitam (bukan merah) */
#tabPiutang.active > div:last-child,
#tabPiutang.selected > div:last-child{
  color:#111 !important;
  font-weight:700;
}
/* =========================
   HOLD MODAL (Transaksi Tersimpan)
   - scroll aman jika list panjang
   - header & footer tetap terlihat
========================= */

.hold-card{
  width:720px;
  max-width:94vw;
  background:#fff;
  border-radius:14px;
  box-shadow:0 10px 30px rgba(0,0,0,.2);
  overflow:hidden;

  /* ✅ bikin modal punya tinggi maksimum */
  max-height: min(78vh, 640px);

  /* ✅ layout flex: header, body(scroll), footer */
  display:flex;
  flex-direction:column;
}

.hold-head{
  padding:12px 14px;
  border-bottom:1px solid #eee;
  background:#fafafa;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
}

.hold-head-title{
  font-weight:800;
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.hold-head-actions{
  display:flex;
  gap:8px;
  flex-shrink:0;
}

/* ✅ area scroll */
.hold-body{
  padding:14px;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
}

/* box list */
.hold-list-box{
  border:1px solid #eee;
  border-radius:12px;
  overflow:hidden;
  background:#fff;
}

/* footer tips */
.hold-foot{
  padding:10px 14px;
  border-top:1px solid #eee;
  color:#777;
  font-size:12px;
  background:#fff;
}

/* Mobile safe */
@media (max-width: 640px){
  .hold-card{
    max-height: 82vh;
  }
}
/* =========================
   HOLD ACTION BUTTONS
========================= */

.hold-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

/* base */
.hold-actions .btn-small{
  padding:6px 12px;
  font-size:12px;
  border-radius:10px;
  border:1px solid transparent;
  cursor:pointer;
  transition:all .15s ease;
  white-space:nowrap;
}

/* PRIMARY: Lanjutkan */
.hold-actions .btn-continue{
  background:#22c55e;              /* hijau */
  color:#fff;
  border-color:#16a34a;
}
.hold-actions .btn-continue:hover{
  background:#16a34a;
}

/* SECONDARY: Rename */
.hold-actions .btn-rename{
  background:#f8fafc;
  color:#334155;
  border-color:#cbd5e1;
}
.hold-actions .btn-rename:hover{
  background:#e2e8f0;
}

/* DANGER: Hapus */
.hold-actions .btn-delete{
  background:#fff;
  color:#dc2626;
  border-color:#fca5a5;
}
.hold-actions .btn-delete:hover{
  background:#fee2e2;
}

/* Mobile: tombol rata */
@media (max-width:640px){
  .hold-actions .btn-small{
    flex:1 1 auto;
    text-align:center;
  }
}
/* =========================================
   ADMIN MODAL: CLEANUP CANCELED ORDERS
   Target: rapi, kompak, mobile aman
========================================= */

/* Pastikan modal wrapper center */
#cleanupCanceledModal.modal{
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  background: rgba(0,0,0,.35);
  z-index: 9999;
}

/* Kalau pakai class hidden */
#cleanupCanceledModal.hidden{
  display: none !important;
}

/* Konten modal */
#cleanupCanceledModal .modal-content{
  width: min(560px, 96vw);
  max-height: 90vh;
  overflow: auto;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(0,0,0,.20);
  border: 1px solid rgba(0,0,0,.08);
}

/* Header rapi */
#cleanupCanceledModal .modal-header{
  position: sticky;
  top: 0;
  background: #fff;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(0,0,0,.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  z-index: 2;
}

#cleanupCanceledModal .modal-title{
  font-weight: 700;
  font-size: 16px;
}

/* Tombol close kecil rapi */
#cleanupCanceledModal .modal-close{
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.10);
  background: #fff;
  cursor: pointer;
}

#cleanupCanceledModal .modal-close:hover{
  background: rgba(0,0,0,.04);
}

/* Body spacing */
#cleanupCanceledModal .modal-body{
  padding: 14px;
}

/* Input PIN + textarea */
#cleanupCanceledModal #cleanupPinInput{
  font-size: 14px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.14);
  outline: none;
}

#cleanupCanceledModal #cleanupPinInput:focus{
  border-color: rgba(0,0,0,.28);
  box-shadow: 0 0 0 3px rgba(0,0,0,.06);
}

/* Textarea nomor pesanan: monospace biar garisnya rapi */
#cleanupCanceledModal #cleanupOrdersTextarea{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 13px;
  line-height: 1.35;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.14);
  outline: none;
  resize: vertical;
  min-height: 170px;
}

#cleanupCanceledModal #cleanupOrdersTextarea:focus{
  border-color: rgba(0,0,0,.28);
  box-shadow: 0 0 0 3px rgba(0,0,0,.06);
}

/* Tombol bawah: rapi dan responsif */
#cleanupCanceledModal .cleanup-actions{
  display: flex;
  gap: 10px;
  margin-top: 14px;
}

#cleanupCanceledModal .cleanup-actions button{
  flex: 1;
  border-radius: 12px;
  height: 44px;
  font-weight: 700;
}

/* Output report */
#cleanupCanceledModal #cleanupResultBox{
  margin-top: 12px;
  border-radius: 12px;
  padding: 12px;
  background: #0f172a; /* gelap elegan */
  color: #fff;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 12.5px;
  line-height: 1.35;
  max-height: 42vh;
  overflow: auto;
}

/* Mobile tweak */
@media (max-width: 480px){
  #cleanupCanceledModal .modal-content{
    width: 96vw;
    border-radius: 12px;
  }
  #cleanupCanceledModal #cleanupOrdersTextarea{
    min-height: 150px;
  }
}
/* =========================
   SETTINGS: ADMIN CARD BUTTON
========================= */
.settings-panel .set-card h3{
  margin-bottom: 6px;
}

.settings-panel .set-card .small-note{
  color:#6b7280;
  font-size: 13px;
  margin-bottom: 10px;
}

/* tombol admin cleanup */
.settings-panel .set-card .btn-admin-cleanup{
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  height: 44px;
  padding: 0 14px;

  border-radius: 12px;
  border: 1px solid rgba(239, 68, 68, 0.35);
  background: rgba(239, 68, 68, 0.10);
  color: #b91c1c; /* merah gelap */
  font-weight: 800;
  cursor: pointer;

  user-select: none;
}

.settings-panel .set-card .btn-admin-cleanup:hover{
  background: rgba(239, 68, 68, 0.16);
  border-color: rgba(239, 68, 68, 0.45);
}

.settings-panel .set-card .btn-admin-cleanup:active{
  transform: translateY(1px);
}

.settings-panel .set-card .btn-admin-cleanup .ico{
  font-size: 18px;
  line-height: 1;
}
#piutangSearch{
  height: 34px;
  padding: 0 10px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  outline: none;
}
#piutangSearch:focus{
  border-color:#F9A825;
  box-shadow: 0 0 0 3px rgba(249,168,37,.15);
}

/* =========================
   CANCEL LOG MODAL - OVERRIDE
========================= */
#canceledLogModal.modal{
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
}

#canceledLogModal.hidden{
  display: none !important;
}

#canceledLogModal .modal-content{
  width: min(820px, 96vw);
  max-height: 90vh;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 18px 60px rgba(0,0,0,0.25);
  overflow: hidden;
}

#canceledLogModal .modal-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid #eee;
}

#canceledLogModal .modal-title{
  font-weight: 900;
  font-size: 14px;
}

#canceledLogModal .modal-close{
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid #eee;
  background: #fff;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
}

#canceledLogModal .modal-body{
  padding: 12px 14px 14px;
}

#canceledLogModal #canceledLogBox{
  margin-top: 10px;
  background: #111;
  color: #fff;
  padding: 10px;
  border-radius: 12px;
  white-space: pre-wrap;
  max-height: 55vh;
  overflow: auto;
  font-size: 12px;
}

/* tombol admin lihat cancel log (lebih netral) */
.settings-panel .set-card .btn-admin-canceledlog{
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  height: 40px;
  padding: 0 14px;

  border-radius: 12px;
  border: 1px solid rgba(59, 130, 246, 0.35);
  background: rgba(59, 130, 246, 0.08);
  color: #1d4ed8;
  font-weight: 800;
  cursor: pointer;
  user-select: none;

  margin-bottom: 10px; /* jarak sebelum tombol merah */
}

.settings-panel .set-card .btn-admin-canceledlog:hover{
  background: rgba(59, 130, 246, 0.12);
  border-color: rgba(59, 130, 246, 0.45);
}

.settings-panel .set-card .btn-admin-canceledlog:active{
  transform: translateY(1px);
}

.settings-panel .set-card .btn-admin-canceledlog .ico{
  font-size: 18px;
  line-height: 1;
}